<template>
	<div class="yellow" style="position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 99;">
		<div class="header flex a-center jlr">
			<div class="back" @click="close"><i class="iconfont icon-arrow-left-copy"></i></div>
			<h2>新增地址</h2>
			<div class="back"></div>
		</div>

		<div class="abox">
			<div class="addeditGroup">
				<div class="item flex jlr a-center">
					<h4>联系人</h4>
					<input type="text" placeholder="请输入联系人姓名" v-model="obj.contactsName">
				</div>
				<div class="item flex jlr a-center">
					<h4>联系电话</h4>
					<input type="Number" maxlength="11" placeholder="请输入联系人电话" v-model="obj.phone">
				</div>
				<div class="item flex jlr a-center">
					<h4>所在地区</h4>
					<div class="fx1 flex a-center jlr" @click="cityshow=true">
						<span><i class="iconfont icon-dizhi"></i>{{address}}</span>
						<i class="iconfont icon-arrow-right"></i>
					</div>
				</div>
				<div class="item flex jlr a-center">
					<h4>详细地址</h4>
					<input type="text" placeholder="请输入详细地址" v-model="obj.dtlAddr">
				</div>
			</div>

			<div class="addeditGroup" style="margin: 0.16rem 0px;">
				<div class="item flex jlr a-center">
					<h4 style="width: 2rem;">设为默认地址</h4>
					<van-switch v-model="obj.isDefault" size="24px" active-color="#fe7537"/>
				</div>

			</div>




			<div class="blockbtn" style="margin-top: 2rem;" @click="save">保存</div>

			<van-popup v-model="cityshow" position="bottom">
				<van-area :area-list="areaList" :value="obj.area" @cancel="cancel" @confirm="confirm"/>
			</van-popup>
		</div>
	</div>
</template>
<script>
import city from '../../assets/js/city.js'
export default {
	props:['show','params'],
	data(){
		return {
			cityshow:false,
			address:'请选择',
			areaList:city,
			obj:{
				contactsName:'',
				phone:'',
				area:'',
				dtlAddr:'',
				isDefault:false
			}
		}
	},
	created() {
		if(this.params){
			this.obj = this.params;
			if(this.obj.addr){
			  this.address = this.obj.addr;
      }
		}
	},
	methods:{
		save(){
			var myreg=/^[1][3,4,5,7,8][0-9]{9}$/;
			if(!this.obj.contactsName){
				this.$toast.fail('请输入联系人姓名')
			}else if(!myreg.test(this.obj.phone)){
				this.$toast.fail('电话号格式不正确')
			}else if(!this.obj.area){
				this.$toast.fail('请选择地址')
			}else if(!this.obj.dtlAddr){
				this.$toast.fail('请输入详细地址')
			}else{
				this.$ajax.saveAddr({...this.obj}).then(res=>{
					if(res.code==0){
						this.$toast.success('保存成功')
						this.$emit('cb')
						this.$emit('update:show',false)
					}
				})
			}

		},
		cancel(){
			this.cityshow = false
		},
		confirm(v){
			this.address = v.map(el=>el.name).join('')
			this.obj.area = v[v.length-1].code
			this.cityshow = false
		},
		close(){
			this.$emit('update:show',false)
		}
	}
}
</script>
